import React, { useState, useEffect } from 'react';
import './index.css';

const useTick = () => {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    setTimeout(() => setTick(tick + 1), 1000);
  }, [tick]);
};

function Clock() {
  useTick();
  const date = new Date();

  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  const secondsDeg = (seconds / 60) * 360;
  const minutesDeg = (minutes / 60) * 360 + secondsDeg / 60;
  const hoursDeg = (hours / 12) * 360 + minutesDeg / 12;

  console.log(hoursDeg, minutesDeg, secondsDeg);

  return (
    <div className="clock">
      <div className="clock-bg">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div>
        <div className="clock-point clock-point--hour" />
        <div className="clock-point clock-point--minute" />
        <div className="clock-point clock-point--second" />
        <div className="clock-dot"></div>
      </div>
      <div>
        {hours}:{seconds}:{minutes}
      </div>
    </div>
  );
}

export default Clock;
